<template>
  <div class="m-content">
    <m-row :gutter="20">
      <m-col :span="12" v-for="l in list" :key="l.name">
        <div class="s-box">
          <div class="station-header">
            <div class="s-label">岗位：</div>
            <div class="s-content">{{ l.post }}</div>
          </div>
          <div class="person-content">
            <div class="person-image">
              <el-image :src="l.photo" fit="cover" loading="lazy">
                <template #error>
                  <div class="image-slot">
                    加载失败
                  </div>
                </template>
              </el-image>
              <div class="person-name">
                <span class="p-name"> {{ l.name }}</span>
              </div>
            </div>
          </div>
          <div class="person-footer">
            <div class="s-label">工号：</div>
            <div class="s-content">{{ l.jobnum }}</div>
          </div>
        </div>
      </m-col>
    </m-row>
  </div>
</template>
<script setup>
import http from '@/utils/request'
import moment from 'moment'
import { Picture as IconPicture } from '@element-plus/icons-vue'

// props
const props = defineProps({
  info: {
    type: Object,
    default: () => { return {} }
  }
})

// 变量
const list = ref([
  // { post: "线长", photo: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", name: "李承泽", jobnum: "0010" },
  { photo: "", name: "", jobnum: "", post: "线长" },
  { photo: "", name: "", jobnum: "", post: "贴片机" },
  { photo: "", name: "", jobnum: "", post: "AOI" },
  { photo: "", name: "", jobnum: "", post: "目检" },
])

// watch监听
watch(
  () => props.info,
  (n) => {
    const prefix = "data:image/png;base64,"
    const defaultPhoto = "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
    list.value.forEach(r => {
      switch (r.post) {
        case "线长": {
          r.name = n.LINE_LEADER_NAME
          r.jobnum = n.LINE_LEADER
          r.photo = n.LINE_LEADER_PHOTO ? prefix + n.LINE_LEADER_PHOTO : defaultPhoto
          break
        }
        case "贴片机": {
          r.name = n.SMT_USER_NAME
          r.jobnum = n.SMT_USER
          r.photo = n.SMT_USER_PHOTO ? prefix + n.SMT_USER_PHOTO : defaultPhoto
          break
        }
        case "AOI": {
          r.name = n.AOI_USER_NAME
          r.jobnum = n.AOI_USER
          r.photo = n.AOI_USER_PHOTO ? prefix + n.AOI_USER_PHOTO : defaultPhoto
          break
        }
        case "目检": {
          r.name = n.VISUAL_INSPECTOR_NAME
          r.jobnum = n.VISUAL_INSPECTOR
          r.photo = n.VISUAL_INSPECTOR_PHOTO ? prefix + n.VISUAL_INSPECTOR_PHOTO : defaultPhoto
          break
        }
      }
    })
  },
  { deep: true, immediate: true }
)

async function getData() {}



function init() {
  getData()
}
onMounted(() => {
  init()
})
// 暴露方法
defineExpose({
  init
})
</script>
<style lang="less" scoped>
@themeColor: rgb(36, 36, 163);
.m-content {
  font-size: 18px;
  height: 100%;
  .m-row {
    height: 100%;
    margin-bottom: 0;
    .m-col {
      padding: 0!important;
      width: calc(50% - 5px)!important;
      &:nth-child(2n-1) {
        margin-right: 10px;
      }
      height: calc(50% - 5px);
      overflow: auto;
      .s-box {
        padding: 0 5px;
        height: 100%;
        border: 1px solid rgb(95, 102, 114);
        display: flex;
        flex-direction: column;
        .station-header, .person-footer {
          display: flex;
          align-items: center;
          .s-label {
            width: 50%;
            text-align: right;
          }
          .s-content {
            width: 50%;
          }
        }
        .person-content {
          flex: 1;
          .person-image {
            position: relative;
            width: 100%;
            height: 100%;
            .el-image {
              width: 100%;
              height: 100%;
              .image-slot {
                width: 100%;
                height: 100%;
                font-size: 14px;
                background-color: #EDEDED99;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                
              }
            }
            .person-name {
              position: absolute;
              width: 100%;
              bottom: 0;
              left: 0;
              text-align: center;
              height: 30px;
              line-height: 30px;
              font-size: 16px;
              background-color: rgba(2, 24, 67, 0.8);
            }
          }
        }
      }
    }
    .m-col:nth-child(1) {
      margin-bottom: 10px;
    }
    .m-col:nth-child(2) {
      margin-bottom: 10px;
    }
  }
}
</style>
